<template>
  <div>
    <div
      class="Log-page"
      :class="[checkedValue ? '' : 'act', 'dsfsdrtee' + jhbjeer]"
    >
      <div class="login-right">
        <n-switch v-model:value="checkedValue">
          <template #checked>
            <i class="iconfont dx-ziyuan by-icon"></i>
          </template>
          <template #unchecked>
            <i class="iconfont dx-yejian by-icon"></i>
          </template>
        </n-switch>
      </div>
      <div class="pr display-flex h100">
        <div class="flex-1 display-flex czbj h100 lkjnsewert">
          <p
            class="
              cf
              fz30
              b
              mt50
              animate__animated animate__bounceInDown animate__delay-1s
            "
          >
            {{ bz.name }}
          </p>
          <div class="flex-1 vertical-center tl log-left">
            <img
              src="../assets/img/login-box-bg.svg"
              class="log-box-bg animate__animated animate__bounceIn"
            />
            <p
              class="
                fz30
                cf
                mt50
                animate__animated animate__bounceInLeft animate__delay-1s
              "
            >
              {{ bz.title }}
            </p>
            <p
              class="
                fz14
                cf
                mt10
                animate__animated animate__bounceInLeft animate__delay-2s
              "
            >
              {{ bz.subheading }}
            </p>
          </div>
        </div>
        <div class="flex-1 h100 vertical-center">
          <div class="log-form-box animate__animated animate__fadeInRight">
            <p class="fz30 b denglu-text">登录系统</p>
            <n-form
              class="mt10"
              :label-width="80"
              ref="formRef"
              :model="formValue"
              :rules="rules"
              :show-label="false"
            >
              <n-form-item path="userName">
                <n-input
                  placeholder="输入用户名"
                  size="large"
                  v-model:value="formValue.name"
                  @keyup.enter="handleValidateClick"
                />
              </n-form-item>
              <n-form-item path="password">
                <n-input
                  type="password"
                  show-password-on="mousedown"
                  placeholder="输入密码"
                  size="large"
                  v-model:value="formValue.paw"
                  @keyup.enter="handleValidateClick"
                />
              </n-form-item>
              <n-form-item>
                <div class="display-flex">
                  <n-checkbox>记住密码</n-checkbox>
                  <!-- <div class="flex-1 tr ls sz">忘记密码?</div> -->
                </div>
              </n-form-item>
              <n-form-item>
                <n-button
                  type="primary"
                  size="large"
                  class="w100"
                  @click="handleValidateClick"
                  >登录</n-button
                >
              </n-form-item>
            </n-form>
          </div>
        </div>
      </div>
      <div class="ckkxxedftwe vertical-center" v-if="name=='honv'">
        <a href="https://beian.miit.gov.cn/#/Integrated/index" class="z9">粤ICP备2023099700号-1 </a>
      </div>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { ref } from "vue";
import { dxpost, hf, dynamicLoadJs } from "../util/index";
import { pageation } from "../util/config";

import { useRouter } from "vue-router";
import { Onfun } from "../websocket/index";
import dxPeer from "../store/dxPeer";
import store from "../store/index";

const { currentRoute } = useRouter();
const qurl: any = currentRoute.value.query;
const bz = pageation.login;
const formRef = ref(null);
let loadingse = ref(false);
const name = import.meta.env.VITE_name
const jhbjeer = import.meta.env.VITE_type || qurl.type || localStorage.sysType;
if (qurl.type) {
  localStorage.sysType = qurl.type;
}
let formValue = ref({
  name: "",
  paw: "",
});
let checkedValue = ref(true);
const rules = {
  name: {
    required: true,
    message: "请输入用户名",
    trigger: ["input"],
  },
  paw: {
    required: true,
    message: "请输入密码",
    trigger: ["input"],
  },
};
const loading = async () => {
  loadingse.value = true;
  const res: any = await dxpost("load", formValue.value);
  loadingse.value = false;
  if (res.errno == 0) {
    localStorage.token = res.data.token;
    // store.state.token = res.data.token;
    localStorage.userNmae = res.data.userNmae;
    localStorage.headPortrait = res.data.headPortrait;
    localStorage.userNickname = res.data.userNickname;
    localStorage.secretKeytoken = res.data.secretKeytoken;
    localStorage.rolemanagement = res.data.RoleOfTheMenu;
    localStorage.index = res.data.index;
    localStorage.logo = res.data.logo; // 网页的logo
    localStorage.dapang = res.data.dapang;
    localStorage.id = res.data.id; // 角色
    localStorage.Userid =  res.data.userId
    localStorage.usertype = res.data.usertype;
    localStorage.name = res.data.name
    store.commit("setrolemanagement", res.data.RoleOfTheMenu);

    if (localStorage.Userid == 32) {
      // 动态加载js
      let url =
        "//duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/kangsheng/LodopFuncs.js";
      dynamicLoadJs(url, () => {
        setTimeout(() => {
          window.LODOP = getLodop();
        }, 3000);
      });
    }

    try{
      Onfun(localStorage.userNmae);
    }catch(e){
      
    }
    // dxPeer.commit("initPeerJs", localStorage.userNmae);

    if (qurl.url) {
      hf(qurl.url, {});
    } else {
      hf("/", {});
    }
  }
};
const handleValidateClick = (e) => {
  formRef.value.validate((errors) => {
    if (!errors) {
      loading();
    } else {
      console.log(errors);
    }
  });
};
</script>
 <style scoped>
.Log-page {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-left: 210px;
  padding-right: 210px;
}
.Log-page::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  background-image: url(../assets/img/login-bg.svg);
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: "";
}
.log-box-bg {
  width: 370px;
}
.log-left {
  padding-bottom: 120px;
}
.log-form-box {
  width: 405px;
}
.ijndert {
  color: #999;
  font-size: 24px;
  cursor: pointer;
}
.ijndert:hover {
  color: #18a058;
}
.login-right {
  position: fixed;
  z-index: 100;
  right: 20px;
  top: 20px;
}
.by-icon {
  color: #ffd93b;
}
.Log-page.act::after {
  background-image: url(../assets/img/login-bg-dark.svg);
}
.ckkxxedftwe{
  position: fixed;
  left: 0;
  bottom: 0;
  height: 40px;
  background: #f8f8f8;
  z-index: 99999;
  width: 100%;
}
</style>